<template>
    <div>
        <Header></Header>
        <group style="margin-top:-20px;">
            <cell title="当前登录账号：智障树啦啦啦"  inline-desc='未开通包月'></cell>
        </group>
        <group>
            <ul class="baoyue">
                <li v-for="(item,index) in baoyue" :key="index">
                    <p>{{item.timeValue}}</p>                                
                    <i class="nowpay" @click="goPaybaoyue">{{item.money}}元</i>
                    <i class="yuanpay" v-if="item.yuanmoney!=item.money&&item.money<item.yuanmoney">{{item.yuanmoney}}元</i><!--当前价格小于原价显示该数据-->                     
                </li>
            </ul>
        </group>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
    export default {
        name: 'ktbaoyue',
        data () {
            return {
                baoyue: [
                    {time:30,timeValue: '1个月',money: '15',yuanmoney:'15'},
                    {time:90,timeValue: '3个月',money: '40',yuanmoney:'45'},
                    {time:180,timeValue: '6个月',money: '75',yuanmoney:'90'},
                    {time:360,timeValue: '12个月',money: '120',yuanmoney:'180'}
                ]
            }
        },
        components : {Header, Footer},
        methods: {
            goPaybaoyue(){
                this.$router.push({name:'paybaoyue'})
            }
        }
    }
</script>

<style scoped>
.baoyue li{
    padding:0 5px;
    list-style:none;
    background: #FFF;
    height: 5em;
    line-height: 5em;
    border-top: 1px solid #F3F3F3;
}
.baoyue li p{
    float:left;
}
.baoyue li i.yuanpay{
    font-style: normal;
    float: right;
    padding-right: .1em;
    font-size: .9em;
    text-decoration: line-through;
    margin-right: 30px;
}
.baoyue li i.nowpay{
    float: right;
    margin-top: 1.5em;
    width: 70px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 28px;
    border-radius: 1em;
    background: #FF7800;
    color: #fff;
    text-align: center;
    line-height: 28px;
    vertical-align: middle;
}
</style>